<form id="orderDetailApp" autocomplete="off" action="/shop/order/ajax_add" class="layui-form layui-box" style="padding:25px 30px 20px 30px"
      method="post">
    <table class="layui-table">
        <tr>
            <td colspan="6" align="center">订单详细信息</td>
        </tr>
        <tr>
            <td>订单号</td>
            <td colspan="5">{{orderDetail.orderNo}}</td>
        </tr>
        <tr>
            <td>支付方式</td>
            <td>{{getkey("payType",orderDetail.payType)}}</td>
            <td>下单时间</td>
            <td>{{orderDetail.orderTime}}</td>
            <td>支付时间</td>
            <td>{{orderDetail.payTime}}</td>
        </tr>
        <tr>
            <td>订单状态</td>
            <td colspan="5">{{getkey("orderStatus",orderDetail.orderStatus)}}</td>
        </tr>
        <tr>
            <td>订单金额</td>
            <td colspan="5">{{orderDetail.orderAmount}}</td>
        </tr>
        <tr>
            <td>昵称</td>
            <td>{{orderDetail.nickName}}</td>
            <td>收件人</td>
            <td>{{orderDetail.receiver}}</td>
            <td>手机号</td>
            <td>{{orderDetail.phone}}</td>
        </tr>
        <tr>
            <td>商品信息</td>
            <td colspan="5">
                <table class="layui-table">
                    <tr v-for="item in orderDetail.orderItems">
                        <td><img style="width:45px;height: 45px;" :src="item.thumbnail"></td>
                        <td>商品名称：{{item.goodsName}}</td>
                        <td>
                            付款：{{item.salePrice}}元
                            <br/>
                            市场价：{{item.marketPrice}}元
                            <br/>
                        </td>
                        <td>备注：{{item.remark}}</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>收货地址</td>
            <td colspan="5">订单号</td>
        </tr>
        <tr>
            <td>物流</td>
            <td>{{getkey("express",orderDetail.logisticsCode)}}</td>
            <td>快递单号</td>
            <td colspan="3">{{orderDetail.logisticsNo}}</td>
        </tr>
    </table>
    <table  v-if="orderDetail.orderStatus!=0" class="layui-table">
        <tr>
            <td colspan="6" align="center">填写物流信息</td>
        </tr>
        <tr>
            <td>物流公司</td>
            <td colspan="5">
                        <select name="logisticsCode" lay-search v-modal="orderDetail.logisticsCode">
                            <option :value="item.key" v-for="item in express">{{item.value}}</option>
                        </select>
            </td>
        </tr>
        <tr>
            <td>快递单号</td>
            <td colspan="4"><input digits=true name="logisticsNo" v-model="orderDetail.logisticsNo" class="layui-input"></td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" v-on:click="writeWaybillN">填写</button>
            </td>
        </tr>
    </table>
</form>
<script>
    require(['jquery', 'vue'], function (jquery, Vue) {
        var vue;
        var orderData;
        $.ajax({
            type : "POST",
            url : '/shop/order/ajax_detail',
            data :{id:transData.id},
            dataType : "json",
            async:false,
            success : function(res) {
                orderData=res.data;
            }
        });
        vue=new Vue({
            el: '#orderDetailApp',
            data: {
                orderDetail:orderData,
                express:json.express
            },
            created: function () {
            },
            methods:{
                gernerateId: function (name,index){
                    return name+"_" +index
                },
                writeWaybillN:function () {
                    $.ajax({
                        type : "POST",
                        url : "/shop/order/writeWaybillN",
                        data :{id:this.orderDetail.id,logisticsCode:this.orderDetail.logisticsCode,logisticsNo:this.orderDetail.logisticsNo},
                        dataType : "json",
                        success : function(res) {
                            if(res.errorCode=="0") {
                                $.msg.success(res.msg);
                            }
                            else {
                                $.msg.error(res.msg);
                            }
                        }
                    });
                }
            }
        });
        window.form.render();
        window.form.on('select', function(data){
            if(data.elem.name=="logisticsCode") {
                vue.orderDetail.logisticsCode=data.value;
            }
        });
    })
</script>